import React, { useState } from 'react'
import './App.css'
import {nanoid}  from 'nanoid'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import { useEffect } from 'react'



export default function App() {
  const [todoList,setTodoList] = useState([
  ])
  //查找localStorage中有没有关于todoList的数据，有就渲染，没有就传一个数据[]
  useEffect(()=>{
    setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
  },[])
  //监听事件 如果放生该改变，则在本地中保存
  useEffect(()=>{
    localStorage.setItem('todoList',JSON.stringify(todoList))
  },[todoList])
  return (
    <div className='todo-container'>
      <div className='todo-wrap'>
        <Header  setTodoList={setTodoList}  todoList={todoList}/>
        <List  todoList={todoList} setTodoList={setTodoList}/>
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}
